<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-13 16:47:24
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-21 15:24:09
 * @FilePath: \cxl-h5\src\pages\personalCenter\message\list\Index.vue
-->
<template>
    <section class="message-container">
        <section class="main">
            <van-pull-refresh v-model="data.refreshLoading" @refresh="data.onRefresh" class="list-main">
                <van-list
                    v-model:loading="data.dataLoading"
                    :finished="data.dataFinished"
                    :finished-text="data.list.length ? '' : ''"
                    loading-text=" "
                    @load="data.onLoad"
                >
                    <section class="box">
                        <!-- 有记录 -->
                        <section class="list" v-if="data.list.length">
                            <section
                                class="li"
                                v-for="(item, index) in data.list"
                                :key="item.title"
                                @click="data.onOpenDetailed(item)"
                            >
                                <!-- 图标 -->
                                <section class="msg-icon">
                                    <template v-if="item.type === 0">
                                        <!-- 其它消息 -->
                                        <img src="../../../../assets/images/qtxx.svg" alt="" srcset="" />
                                    </template>
                                    <template v-else-if="item.type === 1">
                                        <!-- 系统消息 -->
                                        <img src="../../../../assets/images/xtxx.svg" alt="" srcset="" />
                                    </template>
                                    <template v-else-if="item.type === 2">
                                        <!-- 业务消息 -->
                                        <img src="../../../../assets/images/ywxx.svg" alt="" srcset="" />
                                    </template>
                                    <template v-else-if="item.type === 3">
                                        <!-- 调价消息 -->
                                        <img src="../../../../assets/images/tjxx.svg" alt="" srcset="" />
                                    </template>
                                </section>
                                <!-- 内容 -->
                                <section class="msg-information">
                                    <!-- 标题 -->
                                    <section class="msg-title">
                                        <span>{{ data.noticeType[item.type] }}</span>
                                        <p>{{ item.releaseTime }}</p>
                                    </section>
                                    <!-- 内容描述 -->
                                    <section class="msg-describe">{{ item.title }}</section>
                                </section>
                            </section>
                        </section>
                        <!-- 无记录 -->
                        <section class="none" v-if="data.empty">
                            <NoOrder
                                describe="没有任何公告消息"
                                button-text="返回首页"
                                @touch="data.onOpenDetection"
                            ></NoOrder>
                        </section>
                    </section>
                </van-list>
            </van-pull-refresh>
        </section>
    </section>
</template>

<script setup lang="ts" name="messageList">
import { reactive } from 'vue'
import MessageList from '.'
import NoOrder from '@/components/NoOrder.vue'

//初始化数据
const data = reactive(new MessageList())
</script>

<style scoped lang="scss">
.message-container {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    .main {
        height: 100%;
    }
    .list-main {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    .list {
        box-sizing: border-box;
        padding: var(--cxl-size-16);
        .li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--cxl-size-26);
            .msg-icon {
                width: var(--cxl-size-40);
                height: var(--cxl-size-40);
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .msg-information {
                width: calc(100% - var(--cxl-size-40) - var(--cxl-size-8));
                .msg-title {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    span {
                        font-size: var(--cxl-size-16);
                        color: var(--cxl-color-333333);
                        width: 50%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-weight: 600;
                    }
                    p {
                        font-size: var(--cxl-size-12);
                        color: var(--cxl-color-999999);
                    }
                }
                .msg-describe {
                    margin-top: var(--cxl-size-6);
                    font-size: var(--cxl-size-13);
                    color: var(--cxl-color-999999);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>
